<template>
    <div class="textSearch">
        <!-- 历史搜索 -->
        <div class="history">
            <div class="history_title">历史搜索</div>
            <div class="history_list">
                <span v-for="(item,index) in history" :key="index">{{item}}</span>
            </div>
        </div>
    <!-- 搜索发现 -->
        <div class="search_discover">
            <div class="discover_title">搜索发现</div>
            <div class="discover_list">
                <span v-for="(item,index) in discoverArr" :key="index">{{item}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data(){
        return{
            discoverArr:['麻辣烫','米线','披萨','汉堡','腊八粥','烤肉拌饭','味多美','炸鸡']
        }
    },
    computed:{
    ...mapState(['history'])
  }
}
</script>

<style lang="scss" scoped>
    .textSearch{
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        .history{
            .history_title{
                font-weight: 600;
                margin: 10px 0;
                box-sizing: border-box;
            }
            .history_list{
                width: 100%;
                span{
                    display: inline-block;
                    padding: 10px;
                    margin: 10px 5px 10px 0;
                    background: #f5f5f5;
                    font-size: 14px;
                    border-radius: 5px;
                }
            }
        }
        .search_discover{
            width: 100%;
            .discover_title{
                font-weight: 600;
                margin: 10px 0;
                box-sizing: border-box;
            }
            .discover_list{
                display: flex;
                flex-wrap: wrap;
                span{
                    display: inline-block;
                    padding: 10px;
                    margin: 10px 5px 10px 0;
                    background: #f5f5f5;
                    font-size: 14px;
                    border-radius: 5px;
                }
            }
        }
    }

</style>